<template>
    <div class="order-wrap">
        <h3>您的产品</h3>
        <div class="order-list-choose">
            <div class="order-list-option">
                选择产品：
                <v-selection :selections="products" @on-change="productChange"></v-selection>
            </div>
            <div class="order-list-option">
                选择产品：
                <v-selection :selections="products" @on-change="productChange"></v-selection>
            </div>
            <div class="order-list-option">
                开始日期：
                <v-date-picker @change="changeStartDate"></v-date-picker>
            </div>
            <div class="order-list-option">
                结束日期：
                <v-date-picker @change="changeEndDate"></v-date-picker>
            </div>

            <div class="order-list-option">
                关键词：
               <input type="text" v-model.lazy="query" class="order-query" placeholder="请输入关键词" /><!--lazy表示输入框中的内容完全输入 -->
            </div>
        </div>
        <div class="order-list-table">
            <table>
               <tr><th v-for="(item,index) in tableHeads" :key="index" :class="{active:item.active}"  @click="changeOrderType(item)">{{item.label}}</th></tr><!--class自定义样式:class= {} -->
               <!--使用computed中滴 mapGetters()对应滴this.tableData-->
               <tr v-for="(item,index) in tableData" :key="index">
                   <td v-for="(head,index) in tableHeads" :key="index">{{item[head.key]}}</td><!--双重循环 -->
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
import vSelection from '../components/base/selection'
import vDatePicker from '../components/base/datepicker'
import {mapState,mapGetters} from 'Vuex' // 报错原因将Vuex错写成vuex
import _ from 'lodash'
export default {
    components:{
        vSelection,
        vDatePicker
    },
    data(){
        return{
            query:'',
            productId:0,//关联value进行拉下模糊检索
            startDate:'',
            endDate:'',
            query:'',
            products: [ //v-selection组件
                {
                label: '数据统计',
                value: 0
                },
                {
                label: '数据预测',
                value: 1
                },
                {
                label: '流量分析',
                value: 2
                },
                {
                label: '广告发布',
                value: 3
                }
            ],
            tableHeads: [
                {
                label: '订单号',
                key: 'orderId'
                },
                {
                label: '购买产品',
                key: 'product'
                },
                {
                label: '版本类型',
                key: 'version'
                },
                {
                label: '有效时间',
                key: 'period'
                },
                {
                label: '购买日期',
                key: 'date'
                },
                {
                label: '数量',
                key: 'buyNum'
                },
                {
                label: '总价',
                key: 'amount'
                }
            ],
            //tableData:[],//改用使用store进行数据管理 需要注释掉
            currentOrder:'desc'//排序设置
        }
    },
    computed:{
        //es5的写法
        //此写法报 [Vue warn]: Computed property "tableData" was assigned to but it has no setter.
        //原因 一个计算属性，如果没有设置 setter,也就是传入的是一个函数，或者传入的对象里没有 set 属性，当你尝试直接该改变这个这个计算属性的值，都会报这个错误
        // tableData(){
        //      return this.$store.getters.orderList  //获取的state数据,使用组件(此处是orderList.vue)中的计算属性
        // }

       tableData:{
           //将tableData注入数据
           get:function(){
                return this.$store.getters.orderList  //获取的state数据,使用组件(此处是orderList.vue)中的计算属性
           },
           set:function(){

           }
       }
    },
    // computed:{
    //      //es6的写法 在vue2.x中的computed中不要使用箭头函数，因为箭头函数中的this指的是上一层不是本层
    //     //map对象方式获取getters ..mapGetters({})使用了三个点“...”，由于vue-cli生成的依赖包中不能解析此语法，npm install babel-preset-stage-2 --save-dev
    //     //对于计算属性要特别说明一点: vue的计算属性computed默认只有getter,需要使用getter的时候需要自己加一个setter
    //     ...mapGetters({
    //         tableData:'orderList' //引进是静态的
    //     })
    // },
    watch:{
        query(){
            console.log('query a world'); //当鼠标离开输入框的时候通过watch监听并触发该事件
            //this.getTableData();//模糊检索 改用store管理模式
            this.$store.dispatch('fetchOrderList')
        }
    },
    methods:{
        productChange(obj){
            //接受子组件的事件 obj-->this.selections[this.nowIndex]
            console.log('productChange ',obj);
            //this.productId = obj.value;
           // this.getTableData();//模糊检索
           //使用state进行状态管理
           let params = {
               key:'productId',
               value:obj.value
           }
           this.$store.commit('updateParams',params);//访问触发状态  必须用commit触发mutations中的方法
           this.$store.dispatch('fetchOrderList');//获取数据，触发操作 即从vuex拿数据，然后渲染到页面上
        },
        changeStartDate(data){
            console.log('data');
            //this.startDate = data;
            //this.getTableData();//模糊检索 改用store管理模式
            let params = {
                key:'startDate',
                value:data
            }
            this.$store.commit('updateParams',params);
            this.$store.dispatch('fetchOrderList')
        },
         changeEndDate(data){
            //this.endDate = data;
            //this.getTableData();//模糊检索 采用原生模式
             let params = {
                key:'endDate',
                value:data
            }
            this.$store.commit('updateParams',params);
            this.$store.dispatch('fetchOrderList')
        },
        getTableData(){
            let reqParam = {
                query: this.query,
                productId: this.productId,
                startDate: this.startDate,
                endDate: this.endDate
            }
            this.$http.post('/api/getOrderList',reqParam)
            .then((res) =>{
                console.log(res.data.list);
                this.tableData = res.data.list;//this.tabelData进行赋值处理
            },(error) => {
                coonsole.log(error);
            })
        },
        changeOrderType(headItem){
            this.tableHeads.map(item => {
                console.log(item);
                item.active = false;
                return item;
            })
            //设置当前为灰色
            headItem.active = true;

            //排序设置
            if(this.currentOrder == 'asc'){
                this.currentOrder == 'desc';
            }
            if(this.currentOrder == 'desc'){
                this.currentOrder =='asc'
            }
            //重新查询 headItem.key这种写法
            console.log(headItem.key + ' headItem.key  ' + this.currentOrder);
            //this.tableData = _.orderBy(this.tableData, headItem.key, this.currentOrder) //使用computed中滴 mapGetters()对应滴this.tableData

        }
    },
    mounted(){
       // this.getTableData();  即组件的初始化放到mounted中
       //改用store进行状态管理
       this.$store.dispatch('fetchOrderList')
        //打印存储的数据
        console.log(this.$store)
    }
}
</script>

<style scoped>
.order-wrap{width:1200px;min-height:800px;margin:20px auto;overflow:hidden}
.order-wrap h3{font-size:20px;font-weight:bold;margin-bottom:20px}
.order-query{height:25px;line-height:25px;border:1px solid #e3e3e3;outline:none;text-indent:10px}
.order-list-option{display:inline-block;padding-left:15px}
.order-list-option:first-child{padding-left:0}
.order-list-table{margin-top:20px}
.order-list-table table{width:100%;background:#fff}
.order-list-table td,.order-list-table th{border:1px solid #e3e3e3;text-align:center;padding:10px 0}
.order-list-table th{background:#4fc08d;color:#fff;border:1px solid #4fc08d;cursor:pointer}
.order-list-table th.active{background:#35495e}
</style>
